<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link href="../static/images/favicon.ico" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>

<br>
<br>
<br>
<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
    <div class="ur container">
        <div class="ui middle aligned center aligned grid">
            <div class="column">
                <h2 class="ui teal image header">
                    <div class="content">
                        用户注册
                    </div>
                </h2>
                <form class="ui large form" method="post" action="#" id="from" th:action="@{/admin/register}">
                    <div class="ui  segment">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="username" id="username_input" placeholder="用户名">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="nickname" placeholder="昵称">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="email" id="email_input" placeholder="邮箱">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input class="phone" id="phoneNum" type="text" name="phone" placeholder="手机号">
                            </div>
                        </div>
                        <div class="register-box">
                                <input name="code" maxlength="20" type="text" placeholder="请输入验证码" class="caa">
                            <a id="sendCode" class=""> 发送验证码 </a>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="password" name="password" placeholder="密码">
                            </div>
                        </div>
                        <button class="ui fluid large teal submit button" id="user_add">注  册</button>
<!--                        <input type="submit" class="ui fluid large teal submit button" id="user_add" name="注册"></input>-->
                    </div>

                    <div class="ui error mini message"></div>
                </form>
                <button class="ui fluid large teal submit button"><a th:href="@{/admin}">已有账号？ 请登录</a></button>


            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>


<script>


    //校验表单
    function validate_add_from(){
       var username =  $("#username_input").val();
       var regName = /(^[a-zA-Z0-9_-]{3,16}$)|(^[\u2E80-\u9FFF]{2,6})/;
       if ((!regName.test(username))&& (username.length==0)){
           alert("用户名可以是3到16位英文,或者2到6位中文");
           return false;
       }
       //校验邮箱信息
        var email = $("#email_input").val();
       var regemail = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
        if (!regemail.test(email)){
            alert("邮箱格式不正确")
            return  false;
        }
        return true;

    }
    $("#user_add").click(function () {
        //表单校验
        if (!validate_add_from()){
            return false;
        }
        //判断重复校验是否成功
        if ($(this).attr("ajax-va")=="error"){
            return false;
        }
            // alert("eeeeee")
            // alert($("#from from").serialize())
            $.ajax({
                url: "/admin/register",
                type: "POST",
                // data: $("#from from").serialize(),
                // success:function () {
                // alert("OKKK")
                // }
            })


    })
    $("#email_input").change(function () {

        //发送ajax请求校验用户名是否重复
        var email =  this.value;
        $.ajax({
            url:"/checkemail",
            data:"email="+email,
            type:"GET",
            success:function (result) {
                console.log(result)
                if (result.code==0){
                    alert(result.msg)
                    $("#user_add").attr("ajax-va","success")
                }else {
                    alert(result.msg)
                    $("#user_add").attr("ajax-va","error")
                }
            }
        })
    })
    $("#username_input").change(function () {

        //发送ajax请求校验用户名是否重复
        var username =  this.value;
        $.ajax({
            url:"/checkUser",
            data:"username="+username,
            type:"GET",
            success:function (result) {
                console.log(result)
                if (result.code==0){
                    alert(result.msg)
                    $("#user_add").attr("ajax-va","success")
                }else {
                    alert(result.msg)
                    $("#user_add").attr("ajax-va","error")
                }
            }
        })
    })

    // function regStyle(t,str,reg){
    //     if(t == null) return false;
    //     else if(!(reg.test(str))){      //正则失败
    //         $(t).addClass("error_border");
    //         $(t).next().removeClass("hint_hide")
    //             .addClass("error_hint");
    //         return false;
    //     }else{
    //         $(t).removeClass("error_border");
    //         $(t).next().addClass("hint_hide")
    //             .removeClass("error_hint");
    //         return true;
    //     }
    // }
    // $("input[name='phone']").blur(function(){
    //     // 1.1 获取页面相应数据，进行前端正则验证，并取得验证结果
    //     phone = $(this).val();
    //     var reg = /^1[34578]\d{9}$/;
    //     regResult[0] = regStyle($(this),phone,reg);
    // });

    // $(function () {
    //     var userList = getUserList();
    //     //聚焦失焦input
    //     $('input').eq(0).focus(function () {
    //         if ($(this).val().length == 0) {
    //             $(this).parent().next("div").text("支持中文，字母，数字，'-'，'_'的多种组合");
    //         }
    //     })
    //     //input各种判断
    //     //用户名：
    //     $("input[name='username']").blur(function () {
    //         if ($(this).val().length==0){
    //
    //         }else {
    //             for (var m=0; m<userList.length;m++){
    //                 if ($(this).val()==userList.username){
    //                     $(this).parent().next('div').text("该用户已被注册");
    //                     $(this).parent().next("div").css("color", 'red');
    //                     return;
    //                 }
    //             }
    //             $(this).parent().next("div").text("");
    //         }
    //     })
    //     //	获取之前所有已经注册的用户集合
    //     function getUserList() {
    //         var list = localStorage.getItem("session.userList");
    //         if (list!=num){
    //             return JSON.parse(list);
    //         }else {
    //             return new Array();
    //         }
    //     }
    // })

    $('.ui.form').form({
        fields : {
            username : {
                identifier: 'username',
                rules: [{
                    type : 'empty',
                    prompt: '请输入用户名'
                }]
            },
            password : {
                identifier: 'password',
                rules: [{
                    type : 'empty',
                    prompt: '请输入密码'
                }]
            },
            nickname : {
                identifier: 'nickname',
                rules: [{
                    type : 'empty',
                    prompt: '请输入昵称'
                }]
            },
            phone : {
                identifier: 'phone',
                rules: [{
                    type : 'empty',
                    prompt: '请输入手机号'
                }]
            },
            email : {
                identifier: 'email',
                rules: [{
                    type : 'empty',
                    prompt: '请输入邮箱'
                }]
            },
            code : {
                identifier: 'code',
                rules: [{
                    type : 'empty',
                    prompt: '请输入验证码'
                }]
            }
        }
    })
    $(function () {
        $("#sendCode").click(function () {

            //给指定手机号发送验证码
            //2、倒计时
            if($(this).hasClass("disabled")) {
                //正在倒计时中
            } else {
                //1、给指定手机号发送验证码
                $.post("/sms/sendCode?phone=" + $("#phoneNum").val(),function (data) {
                    if (data.code!=0){
                        alert(data.msg)
                    }
                });
                timeoutChangeStyle();
            }
        })
    });
    var num = 60;
    function timeoutChangeStyle() {
        $("#sendCode").attr("class","disabled");
        if(num == 0) {
            $("#sendCode").text("发送验证码");
            num = 60;
            $("#sendCode").attr("class","");
        } else {
            var str = num + "s 后再次发送";
            $("#sendCode").text(str);
            setTimeout("timeoutChangeStyle()",1000);
        }
        num --;
    }
</script>

</body>
</html>